<template>
  <div class="container">
    <!-- Header Section -->
    <div class="header">
      <h2>AI 视频制作</h2>
      <p>通过AI技术，只需输入视频标题，即可快速生成高清画质视频，支持自定义片段，实时预览效果。</p>
    </div>

    <!-- Content Section -->
    <div class="content">
      <el-row :gutter="20">
        <!-- Left Panel -->
        <el-col :span="7">
          <el-card>
            <i class="el-icon-edit-outline" style="color: #544ce6;" /><span style="margin-left: 10px;">提示词设置</span>
            <div class="form-container">
              <el-form :model="formData" ref="form" label-width="100px" class="form" :label-position="labelPosition">
                <!-- 视频标题 -->
                <el-form-item label="视频标题" prop="videoTitle">
                  <el-input v-model="formData.videoTitle" placeholder="输入视频标题"></el-input>
                </el-form-item>
                <!-- 视频描述 -->
                <el-form-item label="视频描述" prop="videoDescription">
                  <el-input type="textarea" v-model="formData.videoDescription" placeholder="请输入视频描述"
                    rows="4"></el-input>
                </el-form-item>
                <!-- 视频风格 -->
                <el-form-item label="视频风格" prop="videoStyle">
                  <el-select v-model="formData.videoStyle" placeholder="写实风格" style="width: 100%">
                    <el-option label="写实风格" value="realistic"></el-option>
                    <el-option label="卡通风格" value="cartoon"></el-option>
                    <el-option label="未来感风格" value="futuristic"></el-option>
                  </el-select>
                </el-form-item>
                <!-- 视频长度 -->
                <el-form-item label="视频长度" prop="videoLength">
                  <el-select v-model="formData.videoLength" placeholder="短片 (10s)" style="width: 100%">
                    <el-option label="短片 (10s)" value="short"></el-option>
                    <el-option label="中等长度 (15s)" value="medium"></el-option>
                    <el-option label="长片 (30s)" value="long"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-card>

          <el-card style="margin-top: 10px;">
            <i class="el-icon-paperclip" style="color: #544ce6;margin-left: 10px;" /><span
              style="margin-left: 10px;">文件上传</span>
            <el-upload drag action="https://jsonplaceholder.typicode.com/posts/" multiple
              style="width:50px;margin-top:10px;">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-card>

          <el-card style="margin-top: 10px;">
            <i class="el-icon-s-tools" style="color: #544ce6" /><span style="margin-left: 10px;">操作控制</span>
            <div><el-button type="primary"
                style="width: 100%;margin-top:10px;background-color:#544ce6;">生成视频</el-button></div>
            <div><el-button style="width: 100%;margin-top:10px;">保存草稿</el-button></div>
            <div><el-button style="width: 100%;margin-top:10px;">清空内容</el-button></div>
          </el-card>

        </el-col>

        <el-col :span="16">
          <el-card>
            <span style="font-size: 21px;margin-bottom: 10px;line-height: 30px;height: 30px;">
              <i class="el-icon-view" style="color:#665fe9;font-size:23px;margin-top:10px;margin-right:5px;" />视频预览
            </span>
            <div class="preview-box">
              <video-player class="video-player" :options="playerOptions" :playsinline="true" :preload="true"
                :autoplay="true" :loop="true" :muted="true"></video-player>
            </div>
          </el-card>

          <el-card style="margin-top: 10px;">
            <i class="el-icon-edit-outline" style="color: #544ce6;" /><span style="margin-left: 10px;">分片信息设置</span>
            <!-- 使用 v-for 动态渲染 el-timeline -->
            <el-timeline style="margin-top: 10px;">
              <el-timeline-item v-for="(item, index) in timelineData" :key="index" :timestamp="item.timestamp"
                placement="top">
                <el-card>
                  <span >{{ item.segmentTitle }}</span>
                  <p>{{ item.promptWords }}</p>
                  <p>关键字: <span>{{ item.keywords.join(', ') }}</span></p>
                  <p>完成进度: {{ item.progress }}</p>
                  <p>提交于: {{ item.timestamp }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-card>

          <el-card style="margin-top: 10px;">
             <i class="el-icon-folder-checked" style="color: #544ce6;" /><span style="margin-left: 10px;">最近完成</span>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: 'top',
      formData: {
        videoTitle: '',
        videoDescription: '',
        videoStyle: 'realistic',
        videoLength: 'medium'
      },
      playerOptions: {
        techOrder: ['html5'],
        sources: [
          {
            type: 'video/mp4',
            src: 'https://vjs.zencdn.net/v/oceans.mp4',  // 视频源
          },
        ],
        poster: 'https://vjs.zencdn.net/v/oceans.png',  // 预览图
        controls: true,
        controlBar: {
          children: ['playToggle', 'volumePanel', 'timeDivider', 'progressControl', 'fullscreenToggle'],
          align: 'center'
        },
      },
      // 模拟的时间线数据
      // 更新后的分片信息数据
      timelineData: [
        {
          segmentTitle: '片段 1',
          promptWords: 'AI 视频生成，视频编辑，实时预览',
          keywords: ['AI', '视频生成', '实时预览'],
          progress: '40%',
          timestamp: '2018/4/12'
        },
        {
          segmentTitle: '片段 2',
          promptWords: '视频风格设置，选择不同风格',
          keywords: ['风格', '设置', '选择'],
          progress: '70%',
          timestamp: '2018/4/3'
        },
        {
          segmentTitle: '片段 3',
          promptWords: '视频播放，上传文件',
          keywords: ['播放', '上传', '文件'],
          progress: '100%',
          timestamp: '2018/4/2'
        }
      ],
    };
  },
  methods: {
    submitForm() {

    }
  }
};
</script>

<style scoped>
::v-deep .el-upload-dragger {
  width: 320px;
}

.form-container {
  width: 100%;
  margin: 20px auto;
}

.video-player {
  border-radius: 10px;
  width: 320px;
  height: 380px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.preview-box {
  height: 100%;
  margin: 0px;
  padding: 0px;
  margin-top: 10px;
  border: 2px solid #ccc;
  border-radius: 10px;
}

.container {
  width: 100%;
  padding: 30px;
  font-family: Arial, sans-serif;
}

.header {
  text-align: left;
}

.content {
  margin-top: 20px;
}

.footer {
  margin-top: 30px;
  text-align: center;
}
</style>
